@extends('layouts.public')

@section('bodyattr')class="gray-bg"@endsection

@section('body')
<style>
    .mask{
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:rgba(0,0,0,0.7);
        z-index:1000;
        display:none;
    }
    .mask-content{
        position:absolute;
        top:50%;
        left:50%;
        background:#fff;
        width:200px;
        height:185px;
        padding:20px;
        transform:translate(-50%,-50%);
    }
    #code{
        width:100px;
        height:100px;
        margin:0 auto 10px;
    }
    .mask-content p{
        color:#999;
        width: 90%;
        line-height:20px;
        font-size:14px;
        text-align:center;
        margin:10px auto;
    }
</style>
    <div class="wrapper wrapper-content">
        <div class="row m-b">
            <div class="col-sm-12">
                <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="{{route('admin.topic.topics')}}">众筹列表</a></li>
                        <li><a href="{{route('admin.topic.topics.add')}}">新增</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <form role="form" class="form-inline" method="get">
                            <div class="form-group">
                                <label class="sr-only">众筹搜索</label>
                                <input type="text" name="title" placeholder="请输入标题" class="form-control" value="{{request('title')}}">
                            </div>
                            &nbsp;&nbsp;
                            <div class="form-group">
                                <input placeholder="请选择开始时间" class="form-control" id="created_at" type="text" name="created_at" value="{{request('created_at')}}" style="width: 200px;"
                                       autocomplete="off">
                            </div>
                            <button type="submit" class="btn btn-primary">搜索</button>
                            <button type="button" class="btn btn-white" onclick="location.href='{{route('admin.topic.topics')}}'">重置</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <table class="table table-striped table-bordered table-hover dataTables-example dataTable">
                            <thead>
                            <tr role="row">
                                <th>众筹ID</th>
                                <th>众筹主题</th>
                                <th>访问量</th>
                                <th>参数团数</th>
                                <th>开团允许人数</th>
                                <th>开团金额</th>
                                <th class="sorting" orderby="start_date">开始时间</th>
                                <th class="sorting" orderby="end_date">结束时间</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            @foreach($topics as $user)
                                <tr class="gradeA">
                                    <td>{{$user['id']}}</td>
                                    <td>{{$user['title']}}</td>
                                    <td>{{$user['times']}}</td>
                                    <td>{{$user['joins']}}</td>
                                    <td>{{$user['num']}}</td>
                                    <td>{{$user['money']}}</td>
                                    <td>{{$user['start_date']}}</td>
                                    <td>{{$user['end_date']}}</td>
                                   
                                    <td>
                                        <a href="{{route('admin.topic.topics.edit',[$user->id])}}">编辑</a>|
                                        <a class="btn showbtn" href="javascript:void(0);" data-id="{{$user->id}}">扫码查看效果</a>|
                                         <a class="ajaxBtn" href="javascript:void(0);" uri="{{route('admin.topic.topics.delete',[$user->id])}}" msg="是否删除该主题？">删除</a>
                                    </td>
                                </tr>
                            @endforeach
                        </table>
                        <div class="row">
                            <div class="col-sm-12">
                                <div>共 {{ $topics->total() }} 条记录</div>
                                {!! $topics->links() !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mask">
            <div class="mask-content">
                <div id="code"></div>
                <p>请打开微信使用扫一扫查看效果</p>
            </div>
            
        </div>
    </div>
@endsection

@section('script')
    <script type="text/javascript" src="{{cdn('js/plugins/laydate/laydate.js')}}"></script>
    <script type="text/javascript" src="{{cdn('js/plugins/jquery.qrcode.min.js')}}"></script>
    <script type="text/javascript">
        laydate.render({
            elem: '#created_at',
            range: true,
            max: 0
        });
        $('.showbtn').click(function(){
            let id = $(this).attr('data-id');
            let url = window.location.host+'/wap/#id='+id;
            $("#code").html('');
            $('#code').qrcode({
                render: "canvas", //也可以替换为table
                width: 100,
                height: 100,
                text: url
            });
            $('.mask').click(function(){
                $(this).hide();
            })
            $('.mask').show();
        })
    </script>
@endsection
